<script setup>
import { ref } from 'vue'
import { loadRootRight } from '@/api/root/right.js'

let list = ref([])

const initRootData = async function () {
  list.value = await loadRootRight()
  console.log(list)
};
let rights = ref(
  {
    1:{
      name:"GET:查询",
      type:"primary"
    },
    2:{
      name:"POST:添加",
      type:"success"
    },
    4:{
      name:"PUT:更新",
      type:"warning"
    },
    8:{
      name:"DELETE:删除",
      type:"danger"
    }
  });
initRootData()
</script>
<template>
  <el-card>
    <template #header>权限列表</template>
    <el-table border stripe size="small" :data="list">
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="菜单名称" prop="right_name"></el-table-column>
      <el-table-column label="API地址"  #default="{row}">
        <div>{{'/api/v1'+row.right_api}}</div>
      </el-table-column>
      <el-table-column label="URL地址" prop="right_path"></el-table-column>
      <el-table-column label="图标" #default="{ row }" width="100">
        <el-icon size="30" v-html="row.right_icon"></el-icon>
      </el-table-column>
      <el-table-column label="包含操作" #default="{row}" width="400">
        <el-tag style="margin-right: 10px" :type="rights[itme].type" effect="dark" v-for="itme in JSON.parse(row.right_function)">{{rights[itme].name}}</el-tag>
      </el-table-column>
    </el-table>

  </el-card>
</template>

<style scoped>
:deep(svg *) {
  stroke: black;
}
</style>
